<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="UTF-8">
	<title>分店管理-预约管理</title>
	<link rel="stylesheet" href="/js/plugin/layui-v2.3.0/layui/css/layui.css">
	<link rel="stylesheet" href="/css/reset.css">
	<link rel="stylesheet" href="/css/index.css">
	<link rel="stylesheet" href="/css/project_set.css">
	<script src="/js/jquery-2.1.1.min.js"></script>
	<script src="/js/plugin/layui-v2.3.0/layui/layui.js"></script>
</head>
<style>
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    background-color: #F5F5F5;
    cursor: pointer;
}
::-webkit-scrollbar-thumb {
    background-color: #a2a2a2;
    border-radius: 2px;
}
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    background-color: #ffffff;
}
body,html{
	height: auto; 
}
.date-input{
	padding-left:30px;
    background: url(/images/icon/rili_icon.png) no-repeat 10px center !important;
}
</style>
<body>
<input type="hidden" id="reserveStartDate" name="reserveStartDate" th:value="${set.reserveStartDate}" />
<input type="hidden" id="reserveEndDate" name="reserveEndDate" th:value="${set.reserveEndDate}" />
	<div class="nav-section-content-container">
		<header class="nav-header">
			<div class="nav-section-header-title">
				<span>预约管理</span>
				<div class="f-right">
				    <button class="layui-btn layui-btn-radius layui-btn-normal " id="add_order"><i class="layui-icon">&#xe654;</i>添加新预约</button>
				</div>
			</div>
		</header>
		<div class="">
			<!-- <div class="m-updown t-center flex-center">
				<div class="chart-box t-left" style="margin-right: 75px;">
					<div class="statistic-box">
						<div class="header"><span class="number">0</span><span class="unit">个</span></div>
						<div class="name"><span>会议个数</span></div>
					</div>
				</div>
				<div class="chart-box t-left" style="margin-right: 75px;">
					<div class="statistic-box">
						<div class="header"><span class="number">0</span><span class="unit">小时</span></div>
						<div class="name"><span>总时长</span></div>
					</div>
				</div>
				<div class="chart-box t-left">
					<div class="statistic-box">
						<div class="header"><span class="number">0.00%</span></div>
						<div class="name"><span>利用率</span></div>
					</div>
				</div>
			</div> -->
			<div class="m-updown">
				<!-- <div class="kb-title m-bottom"><span>场地管理</span></div> -->
				<div class="m-updown">
					<div class="layui-input-inline" style="width:190px">
					     <input autocomplete="off" class="layui-input date-input" id="bookDate" name="bookDate" type="text">
					     <input type="hidden" id="startTime" name="startTime" value="10:00"/>
					     <input type="hidden" id="endTime" name="endTime" value="12:30"/>
					</div>
					<div class="time-filter">
						<button style="cursor:pointer " class="" value="1">昨天</button><button style="cursor:pointer " class="active" value="2">今天</button><button style="cursor:pointer " class="" value="3">明天</button>
					</div>
				</div>
				<div style="width: 100%; height: 100%; position: relative;">
					<div class="meeting-popup"></div>
					<div style="overflow-x: scroll; overflow-y: hidden; margin-top: 15px; margin-left: 140px;">
						<div class="meeting-title-box">

						</div>
						<div class="timeline-box">
							<div class="current-time" ></div>
							<div style="height:30px;">
								<div class="line-time"></div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
<script>
$(function(){
	setHeight()
	layui.use(['element','layer','form','laydate'], function(){
		var form = layui.form,laydate = layui.laydate;
		//初始化选择日期
		laydate.render({
		  elem: '#bookDate'
		  ,done: function(value, date){
			  listDataFile(value);
			  var now=getnow();
			  var shi=now.year+"-"+p(now.month)+"-"+p(now.date);
			  var newTime=setDate(now.year,now.month,now.date)
			  var shi1=newTime.year+"-"+p(newTime.month)+"-"+p(newTime.date-1);
			  var newTime1=setDate(now.year,now.month,now.date+1)
			  var shi2=newTime1.year+"-"+p(newTime1.month)+"-"+p(newTime1.date);
			  if(value==shi){
				  $(".time-filter button:eq(1)").addClass("active").siblings("button").removeClass("active");
			  }else if(value==shi1){
				  $(".time-filter button:eq(0)").addClass("active").siblings("button").removeClass("active");
			  }else if(value==shi2){
				  $(".time-filter button:eq(2)").addClass("active").siblings("button").removeClass("active");
			  }else{
				  $(".time-filter button").removeClass("active");
			  }
		  }
		});
	})
	
	$(".time-filter button").on("click",function(){
		$(this).addClass("active").siblings("button").removeClass("active");
		var type = $(this).attr("value");
		
		var now=getnow();
		var shi=now.year+"-"+now.month+"-"+now.date;
		if(type==1){
			var newTime=setDate(now.year,now.month,now.date-1),
		    shi=newTime.year+"-"+newTime.month+"-"+newTime.date;
			listDataFile(shi);
			$("#bookDate").val(shi);
		}else if(type==2){
			listDataFile(shi);
			$("#bookDate").val(shi);
		}else if(type==3){
			var newTime=setDate(now.year,now.month,now.date+1),
		    shi=newTime.year+"-"+newTime.month+"-"+newTime.date;
			listDataFile(shi);
			$("#bookDate").val(shi);
		}
	})
    //添加新预约
    $("#add_order").on("click",function(){
    	$('#iframeSet-wrap', window.parent.document).children("iframe").attr('src','/app/projectFieldTeam/search');
    })
    //点击小方块，预约时间
    $(".timeline-box").on("click",".time-grid",function(){
    	var index=$(this).index()/2;
    	var fieldId=$(this).attr("value");
    	var projectId=parent.parent.$("#projectId").val();
    	if((index+"").indexOf(".") != -1){
    		var time0=(index+"").split(".")[0];
    		$("#startTime").val(time0+":30");
    		$("#endTime").val((time0*1+1)+":30");
    	}else{
    		$("#startTime").val(index+":00");
    		$("#endTime").val((index+1)+":00");
    	}
    	
    	if($(this).hasClass('past-tense')||$(this).hasClass('meeting-block_disabled')){
    		return false;
    	}else{
    		var index=$(this).index()/2;
    		parent.parent.parent.layer.open({
   			  type: 2, 
			  title:['预约&nbsp;&nbsp;新场地',"font-size:18px"],
			  area: ['700px',"500px"],
			  offset: '98px',
		      shade: [0.6, '#010101'],
		      zIndex:800,
			  content:"/app/projectFieldTeam/add/"+projectId+"_"+fieldId, 
			  end: function () {
				  listDataFile($("#bookDate").val());
		      }
    		})
    	}
    })
	//点击预约色块
	var isFirst = true;
	$('.timeline-box').on("click",".meeting-order",function(){
		var myDate = new Date();
		year=myDate.getFullYear(),//获取当前年
		month=myDate.getMonth()+1,//获取当前月
		date1=myDate.getDate(),//获取当前日
		hours=myDate.getHours(),
		minutes=myDate.getMinutes();
		var shi=year+"-"+p(month)+"-"+p(date1);
		var hm=hours+":"+minutes;
		var id = $(this).attr("value");
		var fieldName="",state="未开始",contacts="",telephone="",startDate="",startTime="",endTime="";
		var left=$(this).offset().left,top=$(this).offset().top-322;
		$.post("/app/projectFieldTeam/selFieldTeam/"+id, function(result) {
			if(result.team!=null){
				fieldName=result.team.fullName;
			}
			contacts=result.contacts;
			telephone=result.telephone;
			startDate=result.bookStartDate;
			startTime=result.startTime;
			endTime=result.endTime;
			
			var startDate1 = new Date(result.bookStartDate.replace("-", "/").replace("-", "/"));
			var endDate1 = new Date(shi.replace("-", "/").replace("-", "/"));
			if(endDate1.getTime()==startDate1.getTime()){
				
				if(CompareDate(hm,result.startTime)&&CompareDate(result.endTime,hm)){
					state="进行中";
				}else if(CompareDate(hm,result.startTime)){
					state="已结束";
				}else if(CompareDate(result.endTime,hm)){
					state="未开始";
				}
				
			}else if(endDate1.getTime()>startDate1.getTime()){
				state="已结束";
			}
			var meetingPopup=`<header class="meeting-header clearfix">`
								+`<h2 class="header-title">`
									+`<span class="t-over" style="max-width: 150px;font-size:18px;color:#666">`+fieldName+`</span><br>`
									+`<span class="badge progress-upcoming">`+state+`</span>`
								+`</h2>`
								+`<i class="layui-icon layui-icon-close icon-cancel" onclick="closePopup(this)"></i>`
							+`</header>`
							+`<ul class="subscribe-details">`
								+`<li><i class="layui-icon layui-icon-username"></i><span>`+contacts+`</span></li>`
								+`<li><i class="layui-icon layui-icon-cellphone"></i><span>`+telephone+`</span></li>`
								+`<li><i class="layui-icon layui-icon-log"></i><span>`+startDate+`&nbsp;&nbsp;`+startTime+`-`+endTime+`</span></li>`
							+`</ul>`
							+`<footer class="meeting-footer">`
								+`<button class="layui-btn layui-btn-normal layui-btn-sm btn-bg" onclick=delOrder("`+result.id+`",this)>取消预约</button>`
							+`</footer>`;
			$('.meeting-popup').html(meetingPopup).css({'top': top+'px', 'left': left+'px'})
			if(isFirst){
				setHeight(314);
				$('html').css("height","100%");
			    $('body').css("height","100%");	
			    isFirst = false;
			}	
		}, 'json');
	})
	
	
	//初始化时间轴
	var myDate = new Date();
	year=myDate.getFullYear(),//获取当前年
	month=myDate.getMonth()+1,//获取当前月
	date=myDate.getDate();//获取当前日
	var shi=year+"-"+p(month)+"-"+p(date);
	listDataFile(shi);
	$("#bookDate").val(shi);
	
}) 

function CompareDate(t1,t2){
var date = new Date();
var a = t1.split(":");
var b = t2.split(":");
return date.setHours(a[0],a[1]) > date.setHours(b[0],b[1]);
}
function delOrder(id,xia){
	parent.parent.parent.layer.confirm('确认要删除吗，删除后不能恢复', function(index){
    	//发送删除请求
    	$.post("/app/projectFieldTeam/delete",{id:id},function(res){
    		parent.parent.parent.layer.msg(res.msg);
    		parent.parent.parent.layer.close(index);
    		listDataFile($("#bookDate").val());
    		closePopup(xia);
    	},"json");
  	});	
}
function listDataFile(date){
	var url="/app/projectField/listdata";
	jQuery.ajax({
        type:"post",
        async:false,
        url:url,
        dataType:"json",
        data:{},
        success:function(data){
        	renderTimeline(data.data,date);
        }
    })
}

function getArr(fieldId,date){
	var arr=[];
	var url="/app/projectFieldTeam/listdata";
	jQuery.ajax({
        type:"post",
        async:false,
        url:url,
        dataType:"json",
        data:{'params[fieldId]':fieldId,'params[startDate]':date},
        success:function(data){
        	for (var i = 0; i < data.data.length; i++) {
        		
        		arr.push(data.data[i].start+"-"+data.data[i].end+"-"+data.data[i].id);
        	}
        }
    })
    return arr;
}
function renderTimeline(data,date){
	var start=$("#reserveStartDate").val();
	var end=$("#reserveEndDate").val();
	//添加小方块	
	//添加linetime里面的内容
	var con="";
	var linetime='';
	var setStartTime=start*2,
		setEndTime=end*2,
		currentTime=parseInt(getnow().allMinutes/30);
	var myDate = new Date();
	year=myDate.getFullYear(),//获取当前年
	month=myDate.getMonth()+1,//获取当前月
	date1=myDate.getDate();//获取当前日
	var shi=year+"-"+p(month)+"-"+p(date1);
	var con1='<div class="current-time" style="left: 0px;"></div><div style="height:30px;"><div class="line-time"></div></div>'
	$('.timeline-box').html(con1);
	for(var i=0;i<25;i++){
		if(i<10){
			i="0"+i;
		}
		linetime+='<div class="time-quantum">'+i+'</div>';
	}
	$('.line-time').html(linetime);
	var startDate = new Date(date.replace("-", "/").replace("-", "/"));
	var endDate = new Date(shi.replace("-", "/").replace("-", "/"));
	//当前时间分割红线
	
	if(startDate.getTime()==endDate.getTime()){
		var leftRedPx=parseInt(getnow().allMinutes/30*33),
		leftMeetPx=parseInt(getnow().allMinutes/30)*33,
		width=leftRedPx-leftMeetPx;
		$(".current-time").css("left",leftRedPx+"px")
	}
	var linebox="";
	
	for (var j = 0; j < data.length; j++) {
		var orderArr=getArr(data[j].id,date);
		
		if(orderArr){
			var orderRes=orderTimeRender(orderArr);
		}else{
			orderArr=[];
		}
		con+='<div class="line-meet"><div class="meet-title"><a>'
			+'<i class="layui-icon layui-icon-chart-screen" style="margin-right: 5px;"></i>'+data[j].name
			+'</a></div></div>';
		
		linebox+='<div class="line-box">';
		for(var i=0;i<48;i++){
			if(startDate.getTime()==endDate.getTime()){//当天
				if(i<setStartTime||i>setEndTime){
					linebox+='<div class="time-grid meeting-block_disabled"></div>';
				}
				if(i<currentTime&&i>=setStartTime){
					linebox+='<div class="time-grid past-tense"></div>';
				}
				if(i>=currentTime&&i<=setEndTime){
					linebox+='<div class="time-grid" value="'+data[j].id+'"></div>';
				}
			}else if(startDate.getTime()>endDate.getTime()){//今天之后
				if(i<setStartTime||i>setEndTime){
					linebox+='<div class="time-grid meeting-block_disabled"></div>';
				}else {
					linebox+='<div class="time-grid" value="'+data[j].id+'"></div>';
				}
			}else if(startDate.getTime()<endDate.getTime()){//今天之前
				if(i<setStartTime||i>setEndTime){
					linebox+='<div class="time-grid meeting-block_disabled"></div>';
				}else {
					linebox+='<div class="time-grid past-tense"></div>';
				}
			}
			
		}
		//if(j==2){
			for(var n=0;n<orderRes.length;n++){
				linebox+='<div value="'+orderRes[n].id+'" class="meeting-status meeting-order" style="left:'+orderRes[n].orderleft+'px; width:'+orderRes[n].orderWidth+'px; background-color: rgb(128, 164, 241);z-index: 9;"></div>';
			}
		//}
		linebox+='<div class="meeting-status" style="left:'+leftMeetPx+'px; width:'+width+'px; background-color: rgb(230, 230, 230); opacity: 1;"></div></div>';
	}
	$(".meeting-title-box").html(con);
	$('.timeline-box').append($(linebox));
	setHeight()
}
//预约时间段的匹配  var orderArr=['19,1-20,2','21,2-22,1'];
function orderTimeRender(orderArr){
	var orderRes=[];
	for(var i=0;i<orderArr.length;i++){
		var parame=orderArr[i].split("-");
		for(var j=0;j<parame.length;j++){
			//计算时间段
			var orderSval=parame[0].split(',')[0],
			orderSval2=parame[0].split(',')[1],
			orderEval=parame[1].split(',')[0],
			orderEval2=parame[1].split(',')[1],
			orderleft=(orderSval*2+(orderSval2-1))*33,
			orderWidth=((orderEval-orderSval)*2+(orderEval2-orderSval2))*33;
			//判断时间预约段的状态
			var allMinutes=getnow().allMinutes;
			var startMinutes=orderSval*60+(orderSval2-1)*30,
			endMinutes=orderEval*60+(orderEval2-1)*30,
			stateOrder="";
			if(allMinutes>endMinutes){
				stateOrder="progress-ended"
			}else if(allMinutes<startMinutes){
				stateOrder="progress-upcoming"
			}else{
				stateOrder="progress-proceeding"
			}
		}
		orderRes.push({"orderleft":orderleft,"orderWidth":orderWidth,"stateOrder":stateOrder,"id":parame[2]})
	}
	return orderRes;
}
function getnow(){
	var myDate = new Date();
	year=myDate.getFullYear(),//获取当前年
	month=myDate.getMonth()+1,//获取当前月
	date=myDate.getDate(),//获取当前日
	hours = myDate.getHours(), //截取小时 
	minutes = myDate.getMinutes(), //截取分钟
	allMinutes=hours*60+minutes;//过了多少分钟；
	return {
			year:year,
			month: month,
			date: date,
			hours:hours,
			allMinutes:allMinutes
	};
}

function setDate(year,month,day){
	var future=new Date(year,month-1,day),
	year=future.getFullYear(),//获取年
	month=future.getMonth()+1,//获取月
	date=future.getDate();//获取日
	return {
		year:year,
		month: month,
		date: date
	}
}
function closePopup(obj){
	$(obj).parent().parent('.meeting-popup').html('');
}
function p(s) {
    return s < 10 ? '0' + s: s;
}
function setHeight(num){
	if(num){
		var h = document.body.clientHeight+num;
	}else{
		var h = document.body.clientHeight;
	}
    window.parent.setiframeWrap(h);
    		
}
</script>
</html>